<template>
    <div v-show="visible"
        class="fixed z-50 grid  p-3 text-sm text-white -translate-x-1/2 -translate-y-1/2 rounded-lg place-content-center top-1/2 left-1/2 bg-black/70">
        <div class="space-y-4">
            <slot name="icon">
                <div v-if="options.loading" class="text-3xl ">
                    <IEos-icons:bubble-loading class="mx-auto" />
                </div>
            </slot>
            <slot>
                <div class="text-center" v-show="options.message">{{ options.message }}</div>
            </slot>
        </div>

    </div>
</template>
    
<script setup lang='ts'>

const options = ref<any>({
    message: '',
    loading: false,
    duration: 3000
});
const visible = ref(false);
var timer: NodeJS.Timeout;
const show = (textOrOption?: string | Object) => {
    clearTimeout(timer);
    if (textOrOption) {
        if (typeof textOrOption == 'string') {
            options.value.message = textOrOption;
        } else {
            options.value = Object.assign(toRaw(unref(options)), textOrOption)
        }
    }
    visible.value = true;
    if (options.value.duration > 0) {
        timer = setTimeout(() => {
            visible.value = false;
        }, options.value.duration);
    }
}
const hide = () => visible.value = false;
const loading = (textOrOption?: string | Object) => {
    options.value.loading = true;
    show(textOrOption)
    return hide;
}
defineExpose({
    show,
    hide,
    loading,
    message: options.value.message
})
</script>
    
<style></style>